<template>
    <div>
        hello vue
        <input type="text" v-model="myText" />
        <button @click="handleAdd()">add</button>

        <ul>
            <li v-for="data in dataList" :key="data">
                {{ data }}
            </li>
        </ul>

        <navbar>
            <button @click="isShow = !isShow">click</button>
        </navbar>
        <sidebar v-show="isShow"></sidebar>
    </div>
</template>

<script>
import navbar from '@/components/01/Navbar.vue';
import sidebar from '@/components/01/Sidebar.vue';
import axios from 'axios';
// 全局引入组件方式
// import Vue from 'vue';
// Vue.component('navbar', navbar);
// Vue.component('sidebar', sidebar);

export default {
    data() {
        return {
            myText: '',
            dataList: [],
            isShow: false
        };
    },
    methods: {
        handleAdd() {
            this.dataList.push(this.myText);
        }
    },
    // 局部组件引入方式
    components: {
        navbar: navbar,
        sidebar: sidebar
    },
    mounted() {
        axios.get('/j/search_subjects?type=tv&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0').then(res => {
            console.log(res.data);
        });
    }
};
</script>

<!-- scoped表示样式只影响当前组件 -->
<style lang="scss" scoped>
ul {
    list-style: none;
    li {
        background: yellow;
    }
}
</style>
